import React, { Component } from "react";
import { Switch, Route,Redirect } from "react-router-dom";
import MyNavLink from "../components/MyNavLink";
import New from "./news"
import Message from "./message"

class Home extends Component {
  render() {
    return (
      <div>
        <h2>Home route component</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <MyNavLink className="list-group-item" to="/home/new">
                News
              </MyNavLink>
            </li>
            <li>
              <MyNavLink className="list-group-item" to="/home/message">
                Message
              </MyNavLink>
            </li>
          </ul>
          <div>
            <Switch>
                <Route path="/home/new" component={New}></Route>
                <Route path="/home/message" component={Message}></Route>
                <Redirect to="/home/new" />
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;
